<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      <span v-text="input"></span>
      <input type="text" v-model="input">
      {{ text }}
    </div>
    <script src="./simple/Dep.js"></script>
    <script src="./simple/Observe.js"></script>
    <script src="./simple/batcher.js"></script>
    <script src="./simple/Watcher.js"></script>
    <script src="./simple/directions.js"></script>
    <script src="./simple/Complier.js"></script>
    <script src="./simple/index.js"></script>
    <script src="./sdom/Element.js"></script>
    <!-- <script src=""></script> -->
    <script>
      const app = new Sue({
        el: 'app',
        data () {
          return {
            temp: 'temp',
            input: 'default',
            text: 'initMsg'
          }
        }
      })
      const divNode = {
        tag: 'div',
        attrs: {
          class: 'test-div',
          'data-id': 'fi',
        },
        children: ['test div node']
      }
      const divEl = new Element(divNode)
      divEl.append({
        tag: 'span',
        attrs: {
          class: 'test-div__text',
          'data-id': 'cs',
          style: 'color: #0ac;',
        },
        children: ['fuck the * end world']
      })
      document.body.appendChild(divEl.render())
    </script>
  </body>
</html>